<template>
  <div id='home'>
    <div class='titleinfo'>
      <van-notice-bar
        left-icon="volume-o"
        :text='notice' />
    </div>
    <div class='search'>
      <van-tabs animated
        @click=onClick
        color='rgba(26, 144, 255)'>
        <van-tab title='推荐任务'>
        </van-tab>
        <van-tab
          v-for='(item,index) in listType'
          :key=index
          :title="item.tname">
        </van-tab>
      </van-tabs>
    </div>
    <div class='box'>
      <v-list>
        <h4
          v-if='tasklist.length?false:true'>
          暂无任务</h4>
        <div
          :v-if='tasklist.length?true:false'
          v-for='(item,index) in tasklist'
          :key=index>
          <div
            v-if='item.uid!=uid?true:false'
            class='message'>
            <div
              @touchstart='gettaskinfo(item.mid,item.uid)'>
              <van-icon
                class='icon'
                size='40'
                color='rgba(26, 144, 255)'
                :name='item.typeicon' />
              <span
                class='messageinfo'>
                <h4>
                  类型:{{item.typename}}
                </h4>
                <span
                  class='user'>价格:{{item.price}}元</span>
                <span
                  class='time'>截至时间:{{item.finishTime}}</span>
              </span>
            </div>
            <button
              @click='getTask(item.mid)'>领取</button>
          </div>
        </div>
      </v-list>
    </div>
    <component :is=name
      @func='send'>
      <van-cell-group>
        <van-field
          v-model='taskinfo.typename'
          label="类型"
          disabled />
        <van-field
          v-model='taskinfo.price'
          label="价格"
          disabled />
        <van-field
          type='textarea'
          v-model='taskinfo.detail'
          label="详情"
          disabled />
        <van-field
          v-model="taskinfo.finishTime"
          label="截止时间"
          disabled />
        <div class='imgbox'>
          <img
            v-for='(item,index) in imgUrlarr'
            :key=index
            :src=item>
        </div>
      </van-cell-group>
    </component>
  </div>
</template>

<script>
import time from '../../JS/time'
import changType from '../../JS/type.js'
import { Notify, Dialog } from 'vant'
export default {
  name: 'home',
  data() {
    return {
      listType: [],
      tasklist: [],
      notice: '',
      isbutton: '',
      uid: '',
      status: '',
      taskinfo: {},
      name: '',
      imgUrlarr: [],
    }
  },
  props: {},
  components: {
    'v-list': () => import('../../components/list'),
    'v-taskinfo': () => import('../../components/taskinfo'),
  },
  computed: {},
  watch: {},
  created() {
    this.uid = window.localStorage.getItem('uid')
    //获取类别列表
    this.http({
      method: 'get',
      url: '/api/listType',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      params: {
        uid: window.localStorage.getItem('uid'),
        token: window.localStorage.getItem('token'),
        pageSize: 10,
        curPage: 1,
      },
    }).then((res) => {
      if (res.data.status == 0) {
        this.listType = res.data.data.list
        this.$store.state.listType = this.listType
      }
    })
    //获取公告信息
    this.http({
      method: 'post',
      url: '/api/listNotices',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      params: {
        uid: window.localStorage.getItem('uid'),
        token: window.localStorage.getItem('token'),
      },
    }).then((res) => {
      var date = time(res.data.data[res.data.data.length - 1].date)
      if (res.data.data.length) {
        this.notice = res.data.data[res.data.data.length - 1].notice + ' ' + ' ' + date
      } else {
        this.notice = '暂无公告'
      }
    })
    this.getrandomList()
  },
  mounted() {},
  methods: {
    gettasklist(name) {
      this.status = name
      this.http({
        method: 'post',
        url: '/api/listActiveMissionsByTid',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          uid: window.localStorage.getItem('uid'),
          token: window.localStorage.getItem('token'),
          tid: name,
        },
      }).then((res) => {
        this.tasklist = res.data.data
        var list = []
        changType(this.tasklist).forEach((v, k) => {
          if (v.uid != window.localStorage.getItem('uid')) {
            list.push(v)
          }
        })
        this.tasklist = list
      })
    },
    getrandomList() {
      //随机<=10个可以接受的任务
      this.http({
        method: 'post',
        url: '/api/randomListActiveMissions',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          uid: window.localStorage.getItem('uid'),
          token: window.localStorage.getItem('token'),
        },
      }).then(
        (res) => {
          if (res.data.status == 0) {
            this.tasklist = res.data.data
            var list = []
            changType(this.tasklist).forEach((v, k) => {
              if (v.uid != window.localStorage.getItem('uid')) {
                list.push(v)
              }
            })
            this.tasklist = list
          }
        },
        (err) => {
          if (err) {
            this.tasklist = []
          }
        }
      )
    },
    onClick(name, title) {
      if (name != 0) {
        this.gettasklist(name)
      } else {
        this.getrandomList()
      }
    },
    getTask(id) {
      Dialog.confirm({
        message: '是否确认领取任务？',
        confirmButtonColor: 'rgba(26, 144, 255, 0.8)',
      }).then(() => {
        this.http({
          method: 'post',
          url: '/api/receiveMission',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          params: {
            uid: window.localStorage.getItem('uid'),
            token: window.localStorage.getItem('token'),
            mid: id,
          },
        }).then((res) => {
          console.log(res)
          if (res.data.status == 0) {
            if (this.status == 0) {
              this.getrandomList()
            } else {
              this.gettasklist(this.status)
            }
            Notify({
              type: 'primary',
              message: res.data.msg,
              duration: 800,
            })
          } else if (this.status == 0) {
            Notify({
              type: 'warning',
              message: res.data.msg,
              duration: 800,
            })
          }
        })
      })
    },
    gettaskinfo(id) {
      this.imgUrlarr = []
      for (var key in this.tasklist) {
        if (this.tasklist[key].mid == id) {
          this.taskinfo = this.tasklist[key]
        }
      }
      this.name = 'v-taskinfo'
      //获取图片
      this.http({
        method: 'post',
        url: '/api/getImageByExample',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          uid: window.localStorage.getItem('uid'),
          token: window.localStorage.getItem('token'),
          mid: id,
        },
      }).then((res) => {
        var resinfo = res.data.data
        resinfo.forEach((v, k) => {
          this.imgUrlarr.push('http://' + resinfo[k].url)
        })
      })
    },
    send(data) {
      this.name = data
    },
  },
}
</script>

<style scoped lang='less'>
#home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  position: relative;
  .titleinfo {
    flex: 1;
  }
  .box {
    flex: 10;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
  }
  .infobox {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    .message {
      width: 100%;
      height: 3rem;
      text-align: center;
      margin-bottom: 1rem;
      img {
        width: 16%;
        height: 3rem;
        background-color: #bbb;
        vertical-align: middle;
        margin-right: 0.4rem;
      }
      .messageinfo {
        width: 65%;
        display: inline-block;
        height: 3rem;
        vertical-align: middle;
        margin-right: 0.4rem;
        font-size: 0.8rem;
        text-align: left;
        span {
          display: block;
        }
        .user {
          color: rgb(105, 105, 105);
        }
        .time {
          color: rgba(26, 144, 255, 0.8);
          font-weight: 600;
        }
      }
      button {
        vertical-align: middle;
        line-height: 0;
        font-size: 0.8rem;
        outline: none;
        border: none;
        background-color: rgba(26, 144, 255, 0.8);
        color: #fff;
        width: 14%;
        height: 1.2rem;
      }
    }
  }
}
</style>
